 <template>
  <div class="vue-signature-pad-container">
    <div class="signature-box">
      <VueSignaturePad
        id="signature"
        width="100%"
        height="400px"
        ref="signaturePad"
        :options="options"
      />
    </div>
    <div>
      <el-button type="primary" plain @click="undo">撤销</el-button>
      <el-button type="success" plain @click="save">保存</el-button>
      <el-button type="warning" plain @click="change">换色</el-button>
      <el-button type="danger" plain @click="resume">重置</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: {
        penColor: "#000",
      },
    };
  },
  methods: {
    // 撤销
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    // 保存
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();

      console.log(isEmpty); // 是否空值
      console.log(data); // base64
    },
    // 切换颜色
    change() {
      if (this.options.penColor == "#00f") {
        this.options = {
          penColor: "#c0f",
        };
      } else {
        this.options = {
          penColor: "#00f",
        };
      }
    },
    // 清除重置
    resume() {
      this.$refs.signaturePad.clearSignature();
    },
  },
};
</script>

<style lang="scss" scoped>
.vue-signature-pad-container {
  padding: 20px;
  .signature-box {
    width: 600px;
  }
}
#signature {
  border: double 3px transparent;
  border-radius: 2px;
  background-image: linear-gradient(white, white),
    radial-gradient(circle at top left, #4bc5e8, #9f6274);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
</style>
